<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商场</title>
    <!-- 清除格式 -->
    <link rel="stylesheet" href="./CSS/reset.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./font/css/all.css">
    <!-- 引入当前页面样式表 -->
    <link rel="stylesheet" href="./CSS/index.css">
    <!-- 引入通用样式表 -->
    <link rel="stylesheet" href="./CSS/base.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="topbar-wrapper">
        <div class="topbar w">
            <!-- 左侧的导航 -->
            <ul class="service">
                <li><a href="javascript:;">小米商城</a></li>
                <li  class="line">|</li>
                <li><a href="javascript:;">MIUI</a></li>
                <li  class="line">|</li>
                <li><a href="javascript:;">loT</a></li>
                <li  class="line">|</li>
                <li><a href="javascript:;">云服务</a></li>
                <li  class="line">|</li>
                <li><a href="javascript:;">天星数科</a></li>
                <li  class="line">|</li>
                <li><a href="javascript:;">有品</a></li>
                <li  class="line">|</li>
                <li><a href="javascript:;">小爱开放平台</a></li>
                <li  class="line">|</li>
                <li><a href="javascript:;">企业团购</a></li>
                <li  class="line">|</li>
                <li><a href="javascript:;">资质证照</a></li>
                <li  class="line">|</li>
                <li><a href="javascript:;">协议规则</a></li>
                <li  class="line">|</li>
                <li class="app-warper">
                    <a class="app" href="javascript:;">
                    下载app
                    <!-- 添加弹出层 -->
                  <div class="qrcode">
                        <img src="//i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米商城" >
                        <span>小米商场APP</span>
                    </div>
                 
                </a>
            </li>
                <li  class="line">|</li>
                <li><a href="javascript:;">智能生活</a></li>
                <li  class="line">|</li>
                <li><a href="javascript:;">Select Location</a></li>
                <li  class="line">|</li>
            </ul>


            <!-- 购物车 -->
            <ul class="shop-cart">
                <li><a href="javascript:;">
                    <i class="fas fa-shopping-cart"></i>
                    购物车
                    <div class="gwc">
                        <span class="mag">购物车里空空如也，赶紧加购吧！</span>
                    </div>
                </a></li>
            </ul>
<!-- 用户登录 -->
            <ul class="user-info">
                <li><a href="javascirpt:;">登录</a></li>
                <li class="line">|</li>
                <li><a href="javascirpt:;">注册</a></li>
                <li class="line">|</li>
                <li><a href="javascirpt:;">消息通知</a></li>
                <li class="line">|</li>
            </ul>
        </div>
    </div>

    <!-- 创建一个头部容器 -->
    <div class="header-wrapper">
        <div class="header w">
            <!-- 创建一个logo -->
            <h1 class="logo">
                <a href="/" title="小米官网"></a>                
            </h1>
            <div class="nav-wrapper">
            <ul class="nav clearfix">
                <li class="all-goods-wrapper">
                    <a class="all-goods" href="">全部商品分类</a>
                    <!-- 创建一个左侧导航栏 -->
                    <ul class="left-menu">
                        <li>
                            <a href="">
                                手机 电话卡
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                电视
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                笔记本 平板
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                家电
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                出行 穿戴
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                智能 路由器
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                电源 配件
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                健康 儿童
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                耳机 音箱
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                生活 箱包
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>

                    </ul>
                </li>
                <li class="show-goods"><a href="">Xiaomi手机</a></li>
                <li class="show-goods"><a href="">Redmi手机</a></li>
                <li class="show-goods"><a href="">电视</a></li>
                <li class="show-goods"><a href="">笔记本</a></li>
                <li class="show-goods"><a href="">平板</a></li>
                <li class="show-goods"><a href="">家电</a></li>
                <li class="show-goods"><a href="">路由器</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>

                <!-- 创建弹出层 -->
                <div class="goods-info"></div>
            </ul>
            </div>

            <div class="search-wrapper">
                <form class="search" action="#">
                    <input class="search-inp" type="text">
                    <button class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>

                </form>
            </div>
        </div>

    </div>

    <!-- 创建banner容器 -->
    <div class="banner-wrapper">
        <div class="banner w">
            <ul class="img-list">
                <li>
                    <a href="#">
                        <img src="./IMG/banner01.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./IMG/banner02.webp" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./IMG/banner03.webp" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./IMG/banner04.webp" alt="">
                    </a>
                </li>
            </ul>

            <div class="pointer">
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>

            <div class="prev-next">
                <a class="prev" href="javascript:;"></a>
                <a class="next" href="javascript:;"></a>
            </div>
        </div>
    </div>
<!-- 右侧工具栏 -->
    <div class="to-top">

    </div>
    <!-- 创建广告容器 -->
    <div class="ad w">
        <ul class="shortcut">
            <li>
                <a href="#">
                    <i class="fas fa-clock"></i>
                    保障服务
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-building"></i>
                    企业团购
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-frog"></i>
                    F码通道
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-robot"></i>
                    米粉卡
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-keyboard"></i>
                    以旧换新
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-sim-card"></i>
                    话费充值
                </a>
            </li>
        </ul>

        <ul class="imgs">
            <li>
                <a href="#"><img src="./IMG/img01.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./IMG/img02.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./IMG/img03.jpeg" alt=""></a>
            </li>
        </ul>
    </div>
</body>
</html>